<template>
	<view class="container">
		<u-navbar title="开店申请" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;padding: 20px;'">
			<u-steps :current="step" :activeColor="theme_color">
				<u-steps-item title="同意协议"></u-steps-item>
				<u-steps-item title="开店信息"></u-steps-item>
				<u-steps-item title="店铺资料"></u-steps-item>
				<u-steps-item title="审核状态"></u-steps-item>
			</u-steps>

			<view class="content" v-if="step==0">
				<scroll-view>
					<view v-html="content" style="text-indent: 20px;letter-spacing: 2rpx;"></view>
				</scroll-view>
				<view style="margin-top: 20px;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="8">
							<checkbox-group @change='ChangeIsDefault'>
								<checkbox :checked="protocol ? true : false" />
								<text style="font-size: 14px;">我已阅读并同意以上协议</text>
							</checkbox-group>
						</u-col>
						<u-col span="4">
							<u-button type="primary" text="同意" size="small" @click="agree()"></u-button>
						</u-col>
					</u-row>
				</view>
			</view>

			<view class="content" v-if="step==1">
				<view class="flex" style="justify-content: space-evenly;padding-bottom: 10px;">
					<view>
						请选择您的开店身份
					</view>
					<view>
						<radio-group @change="idRadioChange">
							<view>
								<label v-for="(item, index) in items" :key="item.value">
									<radio :value="item.value" :checked="index === idRadioCurrent" />
									<text>{{item.name}}</text>
								</label>
							</view>
						</radio-group>
					</view>

				</view>
				<u-alert title="提示 以下所需要上传的电子版资质文件仅支持JPG GIF PNG格式图片,大小请控制在4096K之内." closable="true" type="info"
					effect="dark"></u-alert>
				<view style="width: 100%;height: 10px;"></view>
				<view v-show="personnel">
					<u-alert title="请按照提示填写本人的真实资料" type="warning"></u-alert>
					<u--form :model="personnelModel" :rules="personnelRules" ref="personnelForm">
						<u-form-item label="姓名:" prop="contacts_name">
							<u-input v-model="personnelModel.contacts_name" customStyle="margin-top:10px"
								placeholder="请输入身份证姓名"></u-input>
						</u-form-item>
						<u-form-item label="电话:" prop="contacts_phone">
							<u-input v-model="personnelModel.contacts_phone" customStyle="margin-top:10px"
								placeholder="请输入手机号"></u-input>
						</u-form-item>
						<u-form-item label="联系地址:" labelWidth="80">
							<view class="acea-row row-between-wrapper" @click="per_address_isShow=true">
								<text class="area-text">{{perAreaContent || '省、市、区'}}</text>
								<u-icon name="arrow-right" size="28rpx"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="详细地址:" prop="address" labelWidth="80">
							<u-input v-model="personnelModel.address" customStyle="margin-top:10px"></u-input>
						</u-form-item>
						<u-form-item label="电子邮箱:" prop="email" labelWidth="80">
							<u-input v-model="personnelModel.email" customStyle="margin-top:10px" placeholder="请输入电子邮箱">
							</u-input>
						</u-form-item>
						<u-form-item label="身份证号码:" prop="id_card_no" labelWidth="80">
							<u-input v-model="personnelModel.id_card_no" customStyle="margin-top:10px"
								placeholder="请输入身份证号码">
							</u-input>
						</u-form-item>
						<u-form-item label="手持身份证照片:" labelWidth="120">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in handle_id_fileList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="handle_id_previewImage"></image>
											<view class="del-con" @click="handle_id_delect_image()">
												<view class="del-wrap">
													<image class="del-image"
														src="">
													</image>
												</view>
											</view>	
										</view>
									</block>
									<view class="uni-uploader__input-box" v-show="handle_id_show">
										<view class="uni-uploader__input" @tap="handle_id_uploadpic"></view>
									</view>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="身份证正面照片:" labelWidth="120">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in id_front_fileList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="id_front_previewImage"></image>
											<view class="del-con" @click="id_front_delect_image()">
												<view class="del-wrap">
													<image class="del-image"
														src="">
													</image>
												</view>
											</view>	
										</view>
									</block>
									<view class="uni-uploader__input-box" v-show="id_front_show">
										<view class="uni-uploader__input" @tap="id_front_uploadpic"></view>
									</view>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="身份证背面照片:" labelWidth="120">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in id_back_fileList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="id_back_previewImage"></image>
											<view class="del-con" @click="id_back_delect_image()">
												<view class="del-wrap">
													<image class="del-image"
														src="">
													</image>
												</view>
											</view>		
										</view>
									</block>
									<view class="uni-uploader__input-box" v-show="id_back_show">
										<view class="uni-uploader__input" @tap="id_back_uploadpic"></view>
									</view>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="银行开户名:" prop="bank_account_name" labelPosition="top" labelWidth="100">
							<u-input v-model="personnelModel.bank_account_name" customStyle="margin-top:10px"
								placeholder="请输入银行开户名">
							</u-input>
						</u-form-item>
						<u-form-item label="个人银行账号:" prop="bank_account_number" labelWidth="120" labelPosition="top">
							<u-input v-model="personnelModel.bank_account_number" customStyle="margin-top:10px"
								placeholder="请输入个人银行账号">
							</u-input>
						</u-form-item>
						<u-form-item label="开户银行支行名称:" prop="bank_name" labelWidth="150" labelPosition="top">
							<u-input v-model="personnelModel.bank_name" customStyle="margin-top:10px"
								placeholder="请输入开户银行支行名称">
							</u-input>
						</u-form-item>
					</u--form>
					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="personnelSubmit">
					</u-button>
				</view>
				<view v-show="corp">
					<u-alert title="请按照提示填写企业的真实资料" type="warning"></u-alert>

					<u--form :model="corpModel" :rules="corpRules" ref="corpForm">
						<u-divider text="公司及联系人信息"></u-divider>
						<u-form-item label="公司名称:" prop="company_name" labelWidth="80">
							<u-input v-model="corpModel.company_name" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<u-form-item label="电话:" prop="tel" labelWidth="80">
							<u-input v-model="corpModel.tel" customStyle="margin-top:10px" placeholder="请输入手机号">
							</u-input>
						</u-form-item>
						<u-form-item label="公司所在地:" labelWidth="100">
							<view class="acea-row row-between-wrapper" @click="corp_address_isShow=true">
								<text class="area-text">{{corpAreaContent || '省、市、区'}}</text>
								<u-icon name="arrow-right" size="28rpx"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="公司详细地址:" prop="address" labelWidth="100" labelPosition="top">
							<view style="width: 100%;height: 10px;"></view>
							<u--textarea v-model="corpModel.address"></u--textarea>
						</u-form-item>
						<u-form-item label="公司规模:" prop="guimo" labelWidth="100">
							<u-input v-model="corpModel.guimo" customStyle="margin-top:10px"
								placeholder="员工数:XX人;注册资金:XX万元">
							</u-input>
						</u-form-item>
						<u-form-item label="公司类型:" prop="company_type" labelWidth="100">
							<picker @change="bindCTPickerChange" :value="ctindex" :range="company_type_list">
								<view class="">{{company_type_list[ctindex]}}</view>
							</picker>
						</u-form-item>
						<u-form-item label="联系人姓名:" prop="contacts_name" labelWidth="100">
							<u-input v-model="corpModel.contacts_name" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<u-form-item label="联系人电话:" prop="contacts_phone" labelWidth="100">
							<u-input v-model="corpModel.contacts_phone" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<u-form-item label="电子邮箱:" prop="email" labelWidth="80">
							<u-input v-model="corpModel.email" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>

						<u-divider text="营业执照信息（副本）"></u-divider>
						<u-form-item label="营业执照号:" prop="business_licence_number" labelWidth="100">
							<u-input v-model="corpModel.business_licence_number" customStyle="margin-top:10px"
								placeholder="请输入营业执照号">
							</u-input>
						</u-form-item>
					
						<u-form-item label="营业执照电子版:" labelWidth="120">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in zhizhao_fileList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="zhizhao_previewImage"></image>
											<view class="del-con" @click="zhizhao_delect_image()">
												<view class="del-wrap">
													<image class="del-image"
														src="">
													</image>
												</view>
											</view>		
										</view>
									</block>
									<view class="uni-uploader__input-box" v-show="zhizhao_show">
										<view class="uni-uploader__input" @tap="zhizhao_uploadpic"></view>
									</view>
								</view>
							</view>
						</u-form-item>
				

						<u-divider text="开户银行信息"></u-divider>
						<u-form-item label="银行开户名:" prop="bank_account_name" labelWidth="100">
							<u-input v-model="corpModel.bank_account_name" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<u-form-item label="公司银行账号:" prop="bank_account_number" labelWidth="100">
							<u-input v-model="corpModel.bank_account_number" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<u-form-item label="开户银行支行名称:" prop="bank_name" labelWidth="100">
							<u-input v-model="corpModel.bank_name" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>

						<u-form-item label="开户银行许可证电子版:" labelWidth="120">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in bank_licence_electronic_fileList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="bank_licence_electronic_previewImage"></image>
											<view class="del-con" @click="bank_licence_electronic_delect_image()">
												<view class="del-wrap">
													<image class="del-image"
														src="">
													</image>
												</view>
											</view>	
										</view>
									</block>
									<view class="uni-uploader__input-box" v-show="bank_licence_electronic_show">
										<view class="uni-uploader__input" @tap="bank_licence_electronic_uploadpic">
										</view>
									</view>
								</view>
							</view>
						</u-form-item>
						<u-alert title="此账号为结算账号,请保证图片清晰，文字可辨并有清晰的红色印章" type="warning"></u-alert>

					</u--form>
					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="corpSubmit">
					</u-button>
				</view>
			</view>
			<view class="content" v-if="step==2">
				<view @click="step = 1"> 返回上一步</view>
				<u-divider text="店铺经营信息"></u-divider>
				<view>
					<u--form :model="storeModel" :rules="storeRules" ref="storeForm">
						<u-form-item label="店铺名称:" prop="supplier_name" labelWidth="80">
							<u-input v-model="storeModel.supplier_name" customStyle="margin-top:10px">
							</u-input>
						</u-form-item>
						<!-- <u-alert title="店铺名称注册后不可修改，请认真填写" type="info"></u-alert> -->
						<u-form-item label="店铺等级:" labelWidth="80">
							<picker @change="rankPickerChange" :value="rindex" :range="rankList" range-key="rank_name">
								<view>
									{{rankList[rindex].rank_name}}
								</view>
								<view class="flex" style="align-items: center;padding-top: 5px;">
									<view style="margin-left: 5px;margin-right: 5px;"><u-tag
											:text="'保证金'+rankList[rindex].deposit+'元'" plain size="mini"
											type="warning"></u-tag></view>
									<view><u-tag :text="'入驻费'+rankList[rindex].entry_fee+'元'" plain size="mini"
											type="error"></u-tag></view>
									<view style="margin-left: 5px;"><u-tag :text="'抽成比例'+rankList[rindex].rebate+'%'"
											plain size="mini" type="success"></u-tag></view>
								</view>
							</picker>
						</u-form-item>
						<u-form-item label="所属行业(选填):" labelWidth="130">
							<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
								<u-checkbox :customStyle="{marginBottom: '8px'}"
									v-for="(item, index) in market_type_list" :key="index" :label="item.name"
									:name="item.name">
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<!-- <u-alert title="请根据您所经营的内容认真选择店铺分类，注册后商家不可自行修改" type="info"></u-alert> -->
					</u--form>

					<view>
						<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="storeSubmit">
						</u-button>
					</view>

				</view>
			</view>
			<view class="content" v-if="step==3">
				<view v-if="auditStatus == 0" class="audit">
					<u-alert title="资料上传成功，平台正在审核中，审核时间1-3天，请您耐心等待～" type="warning" center="true" fontSize="18">
					</u-alert>
				</view>
				<view v-else-if="auditStatus == 1" class="audit">
					<u-alert title="店铺申请已通过!" type="success" center="true" fontSize="18"></u-alert>
				</view>
				<view v-else>
					<u-alert title="审核未通过" type="error" center="true" fontSize="18"
						:description="'审核意见:'+settled_info.supplier_remark"></u-alert>
					<view style="padding: 10px;">
						<button type="primary" open-type='contact' style="padding: 10px;">
							联系客服
						</button>
					</view>
					<view style="padding: 10px;">
						<u-button text="重新申请" type="error" @click="resetStep" :plain="true"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="per_address_isShow" ref="uPicker" :columns="per_areaList" keyName="region_name"
			:closeOnClickOverlay="true" :defaultIndex="perCurrentIndex" @change="perAreaChange"
			@confirm="perAreaConfirm" @close="perAreaClose" @cancel="perAreaCancel">
		</u-picker>
		<u-picker :show="corp_address_isShow" ref="corpPicker" :columns="corp_areaList" keyName="region_name"
			:closeOnClickOverlay="true" :defaultIndex="corpCurrentIndex" @change="corpAreaChange"
			@confirm="corpAreaConfirm" @close="corpAreaClose" @cancel="corpAreaCancel">
		</u-picker>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		xy,
		supplier_type,
		supplier_rank
	} from '@/api/store.js'
	import {
		settled,
		settled_info,
		get_regions
	} from '@/api/user.js'
	import {
		BASE_URL
	} from "@/config/app";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				theme_color: getApp().globalData.theme_color,
				//上传按钮的显示与隐藏
				handle_id_show: true,
				id_front_show: true,
				id_back_show: true,
				bank_licence_electronic_show: true,
				zhizhao_show: true,

				auditStatus: 0,
				settled_info: {},
				navH: '',
				step: 0,
				content: '',
				dis: false,
				protocol: false,
				is_submit: false, //是否已经同意协议(流程)

				rankList: [],
				typeList: [],
				rindex: 0,
				tindex: 0,

				IDValue: 'personnel',
				personnel: true,
				corp: false,

				items: [{
						value: 'personnel',
						name: '个人',
						checked: 'true'
					},
					{
						value: 'corp',
						name: '公司'
					}
				],
				idRadioCurrent: 0,

				company_type_list: [
					'私营企业',
					'国有企业',
					'集体所有制',
					'股份制企业',
					'有限合伙企业',
					'联营企业',
					'外商投资',
					'个人独资企业',
					'企业港、澳、台'
				],
				ctindex: 0,

				per_address_isShow: false,
				per_areaList: [
					[],
					[],
					[]
				],
				perCurrentIndex: [0, 0, 0],
				perChangeIndex: [0, 0, 0],
				perAreaContent: '',

				corp_address_isShow: false,
				corp_areaList: [
					[],
					[],
					[]
				],
				corpCurrentIndex: [0, 0, 0],
				corpChangeIndex: [0, 0, 0],
				corpAreaContent: '',

				handle_id_fileList: [],
				id_front_fileList: [],
				id_back_fileList: [],

				zhizhao_fileList: [],
				bank_licence_electronic_fileList: [],

				agreementModel: {},

				personnelModel: {
					step: '2', //1同意协议2提交公司个人资料3提交店铺资料
					apply_type: 2, //申请身份 1公司 2个人
					country: 1, //国家
					province: '', //省份
					city: '', //城市
					district: '', //区县
					address: '', //详细地址
					email: '', //邮箱
					contacts_name: '', //联系人
					contacts_phone: '', //联系电话
					id_card_no: '', //身份证号
					handheld_idcard: '', //手持身份证照片
					idcard_front: '', //身份证正面
					idcard_reverse: '', //身份证反面
					bank_account_name: '', //银行开户名
					bank_account_number: '', //公司银行开户账号
					bank_name: '', //开户银行支行名
				},
				personnelRules: {
					'contacts_name': {
						type: 'string',
						required: true,
						message: '请填写身份证姓名',
						trigger: ['blur', 'change']
					},
					'contacts_phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					address: {
						type: 'string',
						min: 3,
						required: true,
						message: '不低于3个字',
						trigger: ['change']
					},
					email: {
						type: 'email',
						required: true,
						message: '请输入正确的电子邮箱',
						trigger: ['change']
					},
					id_card_no: {
						type: 'string',
						required: true,
						message: '请输入身份证号码',
						trigger: ['change']
					},
					bank_account_name: {
						type: 'string',
						required: true,
						message: '请输入银行开户名',
						trigger: ['change']
					},
					bank_account_number: {
						type: 'string',
						required: true,
						message: '请输入个人银行账号',
						trigger: ['change']
					},
					bank_name: {
						type: 'string',
						required: true,
						message: '请输入开户银行支行名称',
						trigger: ['change']
					},
				},

				//公司表单
				corpModel: {
					step: '2', //1同意协议2提交公司个人资料3提交店铺资料
					apply_type: 1, //申请身份 1公司 2个人
					company_name: '', //公司名称
					country: '', //国家
					province: '', //省份
					city: '', //城市
					district: '', //区县
					address: '', //详细地址
					company_type: '私营企业', //公司类型
					tel: '', //公司电话
					guimo: '', //公司规模
					contacts_name: '', //联系人
					contacts_phone: '', //联系电话
					email: '', //邮箱
					business_licence_number: '', //营业执照号
					zhizhao: '', //营业执照电子版
					organization_code_electronic: '',
					general_taxpayer: '',
					bank_account_name: '', //银行开户名
					bank_account_number: '', //公司银行开户账号
					bank_name: '', //开户银行支行名
					bank_licence_electronic: '', //开户银行许可证电子版
				},
				corpRules: {
					company_name: {
						type: 'string',
						required: true,
						message: '请输入公司名称',
						trigger: ['change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请输入公司详细地址',
						trigger: ['change']
					},
					tel: {
						type: 'string',
						required: true,
						message: '请输入公司电话',
						trigger: ['change']
					},
					guimo: {
						type: 'string',
						required: true,
						message: '请输入公司规模',
						trigger: ['change']
					},
					contacts_name: {
						type: 'string',
						required: true,
						message: '请输入联系人姓名',
						trigger: ['change']
					},
					contacts_phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					email: {
						type: 'email',
						required: true,
						message: '请输入正确的电子邮箱',
						trigger: ['change']
					},
					business_licence_number: {
						type: 'string',
						required: true,
						message: '请输入营业执照号',
						trigger: ['change']
					},
					bank_account_name: {
						type: 'string',
						required: true,
						message: '请输入银行开户名',
						trigger: ['change']
					},
					bank_account_number: {
						type: 'string',
						required: true,
						message: '请输入公司银行账号',
						trigger: ['change']
					},
					bank_name: {
						type: 'string',
						required: true,
						message: '请输入开户银行支行名称',
						trigger: ['change']
					},
				},

				storeModel: {
					rank_id: '', //店铺等级
					type_id: '', //店铺类型
					supplier_name: '',
					market_type:''
				},
				storeRules: {
					supplier_name: {
						type: 'string',
						required: true,
						message: '请输入店铺名称',
						trigger: ['change']
					},
				},
				market_type: 0,
				market_type_list: [{
					name: '机电',
					id: 1
				}, {
					name: '建材',
					id: 4
				}, {
					name: '农资',
					id: 5
				}, {
					name: '日用品',
					id: 6
				}, {
					name: '电器',
					id: 7
				}, {
					name: '食品',
					id: 8
				}, {
					name: '文旅',
					id: 9
				}, {
					name: '汽车配件',
					id: 10
				}],
				checkboxValue1: [],

			}
		},
		onReady() {
			this.$refs.personnelForm.setRules(this.personnelRules)
			this.$refs.corpForm.setRules(this.corpRules)
			this.$refs.storeForm.setRules(this.storeRules)
		},
		watch: {
			step(nVal, oVal) {
				if (nVal == 2) {
					this.getRankList()
					this.getTypeList()
				}
			}
		},
		//#ifdef MP
		// 分享到微信好友
		// onShareAppMessage(e) {
		// 	if(this.content.fid == 100){
		// 		return {
		// 			title: this.content.title,
		// 			imageUrl: this.content.poster,
		// 			path: '/pages/classification/detail?pid=' + this.pid
		// 		};
		// 	}else{
		// 		var imageUrl = '';
		// 		if (this.content.img.length > 0 && this.content.img) {
		// 			imageUrl = this.content.img[0];
		// 		}
		// 		return {
		// 			title: this.content.title,
		// 			imageUrl: imageUrl,
		// 			path: '/pages/classification/detail?pid=' + this.pid
		// 		};
		// 	}
		// },
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '开店申请',
				imageUrl: '',
				path: '/pages/settled/index'
			};
		},
		//#endif
		async onLoad() {
			var that = this;
			this.navH = getApp().globalData.navHeight / 2;
			settled_info({
				app_token: that.app_token
			}).then(res => {
				this.settled_info = res.data;
				this.auditStatus = parseInt(res.data.status)
				if (parseInt(res.data.applynum) == 0) {
					that.step = 1;
				}
				if (parseInt(res.data.applynum) == 2) {
					that.step = 2;
				}
				if (parseInt(res.data.applynum) == 3) {
					that.step = 3;
				}

				if (parseInt(res.data.applynum) == 2 || parseInt(res.data.applynum) == 3) {

					if (that.settled_info.handheld_idcard != '') {
						that.handle_id_show = false;
						that.handle_id_fileList.push(that.settled_info.handheld_idcard);
					}
					if (that.settled_info.idcard_front != '') {
						that.id_front_show = false
						that.id_front_fileList.push(that.settled_info.idcard_front)
					}
					if (that.settled_info.idcard_reverse != '') {
						that.id_back_show = false
						that.id_back_fileList.push(that.settled_info.idcard_reverse)
					}

					if (that.settled_info.zhizhao != '') {
						that.zhizhao_show = false
						that.zhizhao_fileList.push(that.settled_info.zhizhao)
					}

					if (that.settled_info.bank_licence_electronic != '') {
						that.bank_licence_electronic_show = false
						that.bank_licence_electronic_fileList.push(that.settled_info.bank_licence_electronic)
					}

				}

				that.agreementModel = {
					...res.data,
					app_token: that.app_token,
					step: '1',
				}

				that.personnelModel = {
					...res.data,
					app_token: that.app_token,
					step: '2',
					country: 1,
					apply_type: 2
				};
				that.corpModel = {
					...res.data,
					app_token: that.app_token,
					step: '2',
					country: 1,
					apply_type: 1
				};

				that.storeModel = {
					supplier_name: res.data.supplier_name,
					rank_id: res.data.rank_id,
					type_id: res.data.type_id,
					step: '3',
					app_token: that.app_token,
				};

			})
			xy().then(res => {
				that.content = res.data
			})
			let province = [] //省
			let city = [] //市
			let area = [] //区

			// 初始化地区选择器数据 默认取 省、市、区的第一个
			province = await this.getAreaData();
			city = await this.getAreaData(province[0].region_id);
			area = await this.getAreaData(city[0].region_id);
			this.$set(this.per_areaList, '0', province);
			this.$set(this.per_areaList, '1', city);
			this.$set(this.per_areaList, '2', area);

			this.$set(this.corp_areaList, '0', province);
			this.$set(this.corp_areaList, '1', city);
			this.$set(this.corp_areaList, '2', area);

			if (uni.pageScrollTo) {
				uni.pageScrollTo({
					scrollTop: 0
				})
			} else {
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法自动返回至页面顶部'
				})
			}
		},
		methods: {
			//多选所属行业
			checkboxChange(n) {
				var temp =[]
				for (var i = 0; i < this.market_type_list.length; i++) {
					for (var j = 0; j < n.length; j++) {
						if(n[j] == this.market_type_list[i].name){
							temp.push(this.market_type_list[i].id)
						}
					}
				}
				this.storeModel.market_type = temp.toString();
			},
			resetStep() {
				this.step = 1;
			},
			getRankList() {
				supplier_rank({
					market_type: 0
				}).then(async (res) => {
					this.rankList = res.data;
					this.storeModel.rank_id = this.rankList[0].rank_id
					for (let i = 0; i < this.rankList.length; i++) {
						if (this.settled_info.rank_id == this.rankList[i].rank_id) {
							this.storeModel.rank_id = this.rankList[i].rank_id;
							break;
						}
					}
				});
			},
			getTypeList() {
				supplier_type({
					market_type: this.market_type
				}).then(async (res) => {
					this.typeList = res.data;
					this.storeModel.type_id = this.typeList[0].str_id
					for (let j = 0; j < this.typeList.length; j++) {
						if (this.settled_info.type_id == this.typeList[j].str_id) {
							this.storeModel.type_id = this.typeList[j].str_id;
							break;
						}
					}
				});
			},
			rankPickerChange(e) {
				this.rindex = e.detail.value
				this.storeModel.rank_id = this.rankList[this.rindex].rank_id;
			},

			bindCTPickerChange(e) {
				this.ctindex = e.detail.value
				this.corpModel.company_type = this.company_type_list[this.ctindex];
			},

			//营业执照电子版
			zhizhao_uploadpic: function() {
				let that = this;
				if (this.zhizhao_fileList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						that.zhizhao_show = false;
						this.zhizhao_fileList = this.zhizhao_fileList.concat(res.tempFilePaths);
						var img_url = that.zhizhao_fileList[0];
						// 获取图片上传地址
						uni.uploadFile({
							url: BASE_URL + '/users/upload/upload',
							filePath: img_url,
							fileType: 'image',
							name: 'img',
							formData: {
								app_token: that.app_token,
								dir: 'zhizhao',
							},
							success: (res) => {
								if (res.data.length != 0) {
									let data_string = JSON.parse(res.data);
									if (data_string.status != -2) {
										that.zhizhao_fileList[0] = data_string.data;
										that.corpModel.zhizhao = data_string.data;
									} else if (data_string.status == -2) {
										toLogin();
									}
								} else {
									that.$util.Tips({
										title: '上传图片失败',
										duration: 2000
									})
									that.zhizhao_fileList = [];
									that.zhizhao_show = true;
								}
							}
						});
					},
					fail: (err) => {
						that.zhizhao_show = true;
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			//预览图片
			zhizhao_previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.zhizhao_fileList
				})
			},

			// 删除图片
			zhizhao_delect_image: function(e) {
				this.zhizhao_fileList = [];
				this.zhizhao_show = true;
				this.corpModel.zhizhao = ''
			},

			/*
			 *开户银行许可证电子版
			 */
			bank_licence_electronic_uploadpic: function() {
				let that = this;
				if (this.bank_licence_electronic_fileList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						that.bank_licence_electronic_show = false;
						this.bank_licence_electronic_fileList = this.bank_licence_electronic_fileList
							.concat(res.tempFilePaths);
						var img_url = that.bank_licence_electronic_fileList[0];
						// 获取图片上传地址
						uni.uploadFile({
							url: BASE_URL + '/users/upload/upload',
							filePath: img_url,
							fileType: 'image',
							name: 'img',
							formData: {
								app_token: that.app_token,
								dir: 'bank_licence_electronic',
							},
							success: (res) => {
								if (res.data.length != 0) {
									let data_string = JSON.parse(res.data);
									if (data_string.status != -2) {
										that.bank_licence_electronic_fileList[0] = data_string
											.data;
										that.corpModel.bank_licence_electronic = data_string
											.data;
									} else if (data_string.status == -2) {
										toLogin();
									}
								} else {
									that.$util.Tips({
										title: '上传图片失败',
										duration: 2000
									})
									that.bank_licence_electronic_fileList = [];
									that.bank_licence_electronic_show = true;
								}
							}
						});
					},
					fail: (err) => {
						that.bank_licence_electronic_show = true;
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			//预览图片
			bank_licence_electronic_previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.bank_licence_electronic_fileList
				})
			},

			// 删除图片
			bank_licence_electronic_delect_image: function(e) {
				this.bank_licence_electronic_fileList = [];
				this.bank_licence_electronic_show = true;
				this.corpModel.bank_licence_electronic = '';
			},

			//handheld ID picture
			handle_id_uploadpic: function() {
				let that = this;
				if (this.handle_id_fileList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						that.handle_id_show = false;
						this.handle_id_fileList = this.handle_id_fileList.concat(res.tempFilePaths);
						var img_url = that.handle_id_fileList[0];
						// 获取图片上传地址
						uni.uploadFile({
							url: BASE_URL + '/users/upload/upload',
							filePath: img_url,
							fileType: 'image',
							name: 'img',
							formData: {
								app_token: that.app_token,
								dir: 'id_handheld',
							},
							success: (res) => {
								if (res.data.length != 0) {
									let data_string = JSON.parse(res.data);
									if (data_string.status != -2) {
										that.handle_id_fileList[0] = data_string.data;
										that.personnelModel.handheld_idcard = data_string.data;
									} else if (data_string.status == -2) {
										toLogin();
									}
								} else {
									that.$util.Tips({
										title: '上传图片失败',
										duration: 2000
									})
									that.handle_id_fileList = [];
									that.handle_id_show = true;
								}
							}
						});
					},
					fail: (err) => {
						that.handle_id_show = true;
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			//预览图片
			handle_id_previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.handle_id_fileList
				})
			},

			// 删除图片
			handle_id_delect_image: function(e) {
				this.handle_id_fileList = [];
				this.handle_id_show = true;
				this.personnelModel.idcard_front = ''
			},

			//ID front picture
			id_front_uploadpic: function() {
				let that = this;
				if (this.id_front_fileList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						that.id_front_show = false;
						this.id_front_fileList = this.id_front_fileList.concat(res.tempFilePaths);
						var img_url = that.id_front_fileList[0];
						// 获取图片上传地址
						uni.uploadFile({
							url: BASE_URL + '/users/upload/upload',
							filePath: img_url,
							fileType: 'image',
							name: 'img',
							formData: {
								app_token: that.app_token,
								dir: 'id_front',
							},
							success: (res) => {
								if (res.data.length != 0) {
									let data_string = JSON.parse(res.data);
									if (data_string.status != -2) {
										that.id_front_fileList[0] = data_string.data;
										that.personnelModel.idcard_front = data_string.data;
									} else if (data_string.status == -2) {
										toLogin();
									}
								} else {
									that.$util.Tips({
										title: '上传图片失败',
										duration: 2000
									})
									that.id_front_fileList = [];
									that.id_front_show = true;
								}
							}
						});
					},
					fail: (err) => {
						that.id_front_show = true;
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			//预览图片
			id_front_previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.id_front_fileList
				})
			},

			// 删除图片
			id_front_delect_image: function(e) {
				this.id_front_fileList = [];
				this.id_front_show = true;
				this.personnelModel.idcard_reverse = ''
			},

			// ID back picture
			id_back_uploadpic: function() {
				let that = this;
				if (this.id_back_fileList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						that.id_back_show = false;
						this.id_back_fileList = this.id_back_fileList.concat(res.tempFilePaths);
						var img_url = that.id_back_fileList[0];
						// 获取图片上传地址
						uni.uploadFile({
							url: BASE_URL + '/users/upload/upload',
							filePath: img_url,
							fileType: 'image',
							name: 'img',
							formData: {
								app_token: that.app_token,
								dir: 'id_back',
							},
							success: (res) => {
								if (res.data.length != 0) {
									let data_string = JSON.parse(res.data);
									if (data_string.status != -2) {
										that.id_back_fileList[0] = data_string.data;
										that.personnelModel.idcard_reverse = data_string.data;
									} else if (data_string.status == -2) {
										toLogin();
									}
								} else {
									that.$util.Tips({
										title: '上传图片失败',
										duration: 2000
									})
									that.id_back_fileList = [];
									that.id_back_show = true;
								}
							}
						});
					},
					fail: (err) => {
						that.id_back_show = true;
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			//预览图片
			id_back_previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.id_back_fileList
				})
			},

			// 删除图片
			id_back_delect_image: function(e) {
				this.id_back_fileList = [];
				this.id_back_show = true;
				this.personnelModel.idcard_reverse = ''
			},

			async getAreaData(region_id = 1) {
				const {
					data
				} = await get_regions({
					region_id: region_id,
				})
				return data
			},

			//个人-地址选择
			async perAreaChange(e) {
				const {
					columnIndex,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				let city = []; //市
				let area = []; //区

				if (columnIndex === 0) {
					city = await this.getAreaData(this.per_areaList[columnIndex][index].region_id)

					picker.setColumnValues(1, city)
					this.per_areaList[1] = city

					area = await this.getAreaData(city[0].region_id)
					picker.setColumnValues(2, area)
					this.per_areaList[2] = area

				} else if (columnIndex === 1) {

					area = await this.getAreaData(this.per_areaList[columnIndex][index].region_id)
					picker.setColumnValues(2, area)
					this.per_areaList[2] = area
				}
				this.perChangeIndex[columnIndex] = index
			},

			perAreaConfirm(e) {
				const {
					indexs,
					value
				} = e
				this.per_address_isShow = false
				this.perCurrentIndex = indexs
				let area = value[2]
				if (!area) {
					area = {
						region_name: ''
					}
				}
				this.perAreaContent = `${value[0].region_name}-${value[1].region_name}-${area.region_name || '未知'}`
				this.personnelModel.province = value[0].region_id;
				this.personnelModel.city = value[1].region_id;
				this.personnelModel.district = value[2].region_id;
			},

			perAreaCancel() {
				this.pickerClose()
			},

			perAreaClose() {
				this.pickerClose()
			},

			async pickerClose() {
				this.per_address_isShow = false
				if (this.perCurrentIndex.toString() == this.perChangeIndex.toString()) {
					return false
				}
				//根据当前选择的地域索引值重置数据
				const picker = this.$refs.uPicker

				const city = await this.getAreaData(this.per_areaList[0][this.perCurrentIndex[0]].region_id)
				picker.setColumnValues(1, city)
				this.per_areaList[1] = city

				const area = await this.getAreaData(this.per_areaList[1][this.perCurrentIndex[1]].region_id)
				picker.setColumnValues(2, area)
				this.per_areaList[2] = area
				//设置对应列的选择值
				picker.setIndexs(this.perCurrentIndex)
				this.perChangeIndex = JSON.parse(JSON.stringify(this.perCurrentIndex))
			},

			//公司-地址选择
			async corpAreaChange(e) {
				const {
					columnIndex,
					index,
					indexs,
					picker = this.$refs.corpPicker
				} = e
				let city = []; //市
				let area = []; //区

				if (columnIndex === 0) {
					city = await this.getAreaData(this.corp_areaList[columnIndex][index].region_id)

					picker.setColumnValues(1, city)
					this.corp_areaList[1] = city

					area = await this.getAreaData(city[0].region_id)
					picker.setColumnValues(2, area)
					this.corp_areaList[2] = area

				} else if (columnIndex === 1) {

					area = await this.getAreaData(this.corp_areaList[columnIndex][index].region_id)
					picker.setColumnValues(2, area)
					this.corp_areaList[2] = area
				}
				this.perChangeIndex[columnIndex] = index
			},

			corpAreaConfirm(e) {
				const {
					indexs,
					value
				} = e
				this.corp_address_isShow = false
				this.corpCurrentIndex = indexs
				let area = value[2]
				if (!area) {
					area = {
						region_name: ''
					}
				}
				this.corpAreaContent = `${value[0].region_name}-${value[1].region_name}-${area.region_name || '未知'}`
				this.corpModel.province = value[0].region_id;
				this.corpModel.city = value[1].region_id;
				this.corpModel.district = value[2].region_id;
			},

			corpAreaCancel() {
				this.corpPickerClose()
			},

			corpAreaClose() {
				this.corpPickerClose()
			},

			async corpPickerClose() {
				this.corp_address_isShow = false
				if (this.corpCurrentIndex.toString() == this.corpChangeIndex.toString()) {
					return false
				}
				//根据当前选择的地域索引值重置数据
				const picker = this.$refs.corpPicker

				const city = await this.getAreaData(this.corp_areaList[0][this.corpCurrentIndex[0]].region_id)
				picker.setColumnValues(1, city)
				this.corp_areaList[1] = city

				const area = await this.getAreaData(this.corp_areaList[1][this.corpCurrentIndex[1]].region_id)
				picker.setColumnValues(2, area)
				this.corp_areaList[2] = area
				//设置对应列的选择值
				picker.setIndexs(this.corpCurrentIndex)
				this.corpChangeIndex = JSON.parse(JSON.stringify(this.corpCurrentIndex))
			},

			personnelSubmit() {
				var that = this;
				if (that.personnelModel.handheld_idcard == '' || that.personnelModel.idcard_front == '' || that
					.personnelModel.idcard_reverse == '') {
					return that.$util.Tips({
						title: '请上传相关图片'
					});
				}
				if (that.personnelModel.province == '' || that.personnelModel.city == '' || that
					.personnelModel.district == '') {
					return that.$util.Tips({
						title: '请选择联系地址'
					});
				}
				this.$refs.personnelForm.validate().then(res => {
					uni.showLoading({
						title: '上传中...'
					})
					settled(that.personnelModel).then(async (res) => {
						uni.hideLoading()
						uni.$u.toast(res.msg)
						if (res.status == 0) {
							that.step = 2;
						}
					});
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast('请填写相关信息')
				})
			},

			corpSubmit() {
				var that = this;
				// if (that.corpModel.zhizhao == '' || that.corpModel.bank_licence_electronic == '') {
				// 	return that.$util.Tips({
				// 		title: '请上传相关图片'
				// 	});
				// }
				if (that.corpModel.province == '' || that.corpModel.city == '' || that.corpModel.district == '' || that
					.corpAreaContent == '') {
					return that.$util.Tips({
						title: '公司所在地址'
					});
				}
				this.$refs.corpForm.validate().then(res => {
					uni.showLoading({
						title: '上传中...'
					})
					settled(that.corpModel).then(async (res) => {
						uni.hideLoading()
						uni.$u.toast(res.msg)
						if (res.status == 0) {
							that.step = 2;
						}
					});
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast('请填写相关信息')
				})
			},

			storeSubmit() {
				var that = this
				if (that.storeModel.rank_id == '') {
					return that.$util.Tips({
						title: '请选择店铺等级'
					});
				}
				// if (that.storeModel.market_type == '') {
				// 	return that.$util.Tips({
				// 		title: '请选择所属行业'
				// 	});
				// }

				that.$refs.storeForm.validate().then(res => {
					uni.showLoading({
						title: '上传中...'
					})
					settled(that.storeModel).then(async (res) => {
						uni.hideLoading()
						uni.$u.toast(res.msg)
						if (res.status == 0) {
							settled_info({
								app_token: that.app_token
							}).then(res => {
								this.auditStatus = parseInt(res.data.status)
								that.step = 3;
							})
						}
					});
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast('校验失败')
				})
			},

			idRadioChange(e) {
				if (e.detail.value == 'personnel') {
					this.personnel = true;
					this.corp = false;
				} else {
					this.personnel = false;
					this.corp = true;
				}
			},
			ChangeIsDefault(e) {
				this.$set(this, 'protocol', !this.protocol);
			},
			agree() {
				let that = this;
				if (!that.protocol) {
					return that.$util.Tips({
						title: '请先阅读并同意协议'
					});
				} else {
					settled(that.agreementModel).then(async (res) => {
						if (res.status != -1) {
							that.step = 1;
							setTimeout(() => {
								uni.pageScrollTo({
									scrollTop: 0
								})
							}, 1000)

						} else {
							that.$util.Tips({
								title: res.msg
							});
						}
					});
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: absolute;
		width: 100%;
		// height: 100%;
		background-color: #ffffff;

		.content {
			padding: 20px 10px;
		}

		.uni-uploader__files {
			flex-wrap: nowrap;

			.uni-uploader__file {
				margin: 10rpx;
				width: 210rpx;
				height: 210rpx;
				position: relative;
			}
		}

		.audit {
			padding-top: 100px;
		}
	}
</style>